<mat-toolbar
	class="spaceBetweenCenter">
	<mat-form-field appearance="legacy" class="searchField" style="width: 250px; margin-bottom: -1.25em">
		<input #filter
			   (keyup)="filterChanged(filter.value)"
			   autocomplete="off"
			   matInput
			   placeholder="Filter complex or table">
		<button (click)="filterChanged('')"
				*ngIf="filter.value"
				aria-label="Clear" mat-icon-button
				matSuffix>
			<span class="material-symbols-outlined notranslate">close</span>
		</button>
	</mat-form-field>

	<a href="https://docs.webdb.app/complexes"
	   mat-button
	   target="_blank">
		<span class="material-symbols-outlined notranslate">
			dictionary
		</span>
	</a>
</mat-toolbar>

<mat-tab-group>
	<mat-tab
		*ngFor="let type of Object.keys(complexes)"
		[label]="'[' + Object.values(complexes[type]).length + '] ' + type.charAt(0).toUpperCase() + type.slice(1).toLowerCase().replace('_', ' ')">

		<mat-card *ngFor="let complex of complexes[type]" [hidden]="complex.hide" class="complex">
			<mat-card-header>
				<ng-container *ngIf="complex.rename">
					<div>
						<mat-form-field appearance="legacy" style="width: 200px; margin-bottom: -1.25em">
							<input
								[(ngModel)]="complex.newName"
								autocomplete="off"
								matInput>
						</mat-form-field>
					</div>
					<div>
						<button
							(click)="rename(complex, type)"
							mat-button>
							<span class="material-symbols-outlined notranslate" style="color: #2196f3;">
								check_circle
							</span>
						</button>

						<button
							(click)="complex.rename = false"
							mat-button>
							<span class="material-symbols-outlined notranslate">
								cancel
							</span>
						</button>
					</div>
				</ng-container>
				<ng-container *ngIf="!complex.rename">
					<div>
						<h4>{{ complex.name }}</h4>
						<div *ngIf="complex.table">
							on <a
							[routerLink]="['/' + selectedServer!.name, selectedDatabase!.name, complex.table]">{{ complex.table }}</a>
							<span *ngIf="complex.column">.{{ complex.column }}</span>
						</div>
					</div>
					<div style="display: flex; gap: 8px;">
						<button
							(click)="alter(complex, type)"
							mat-stroked-button
							mat-button>
							Alter
						</button>
						<button
							*ngIf="selectedServer!.driver.renameComplex(complex, type, selectedDatabase!.name)"
							(click)="complex.rename = true"
							mat-stroked-button
							mat-button>
							Rename
						</button>
						<button
							(click)="drop(complex, type)"
							mat-stroked-button
							color="warn"
							mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								delete
							</span>
						</button>
					</div>
				</ng-container>
			</mat-card-header>

			<pre *ngIf="complex.value"><code
				[highlight]="complex.value"
				[languages]="[selectedServer?.driver!.language.id, 'JSON']">
			</code></pre>
		</mat-card>
	</mat-tab>
</mat-tab-group>
